const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isDEV = process.env.NODE_ENV === "development";

module.exports = {
  entry: path.join(__dirname, "./src/index.tsx"), // 入口文件
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },

  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"], // 解析这些后缀
    alias: {
      "@": path.join(__dirname, "../src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        include: [path.resolve(__dirname, "./src")],
        use: [
          "thread-loader",
          {
            loader: require.resolve("babel-loader"),
            options: {
              // 预设执行顺序由右往左,所以先处理ts,再处理jsx
              presets: ["@babel/preset-react", "@babel/preset-typescript"],
              plugins: [
                isDEV && require.resolve("react-refresh/babel"), // 如果是开发模式,就启动react热更新插件
                // ...
              ].filter(Boolean), // 过滤空值
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /.(css|less)$/, //匹配 css和less 文件
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["autoprefixer"],
              },
            },
          },
          "less-loader",
        ],
      },
    ],
  },
  plugins: [
    // ...
    new webpack.DefinePlugin({
      "process.env.BASE_ENV": JSON.stringify(process.env.BASE_ENV),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html"), // 模板取定义root节点的模板
      /**
       * inject 配置项是 HtmlWebpackPlugin 的一个配置选项，它控制着Webpack打包后的CSS、JS等静态资源文件是否和如何自动注入到你的HTML模板中。这是个非常有用的特性，因为它会自动为我们添加<script>和<link>标签，从而引入JavaScript和CSS文件，并且保证它们的正确加载顺序。这样，我们就不需要手动去维护这些资源在HTML文件中的引用了。
       */
      inject: true, // 自动注入静态资源
    }),
  ],
  cache: {
    type: "filesystem", // 使用文件缓存
  },
};
